<template>
    <div class="particulars">
        <div class="top">
            <mu-appbar class="topbar">
                <mu-icon-button icon='arrow_back'  slot="left" @click='back'/>
                <div slot="default" class="default">
                    <mu-flat-button label="商品" class="demo-flat-button" primary/>
                    <mu-flat-button label="详情" class="demo-flat-button" primary/>
                    <mu-flat-button label="评价" class="demo-flat-button" primary/>
                </div>
                <mu-icon-button icon='more_vert'  slot="right" />
            </mu-appbar>
        </div>
        
        <div class="content">
            <swiper :options="swiperOption" class="swiperlist">
                <swiper-slide v-for="(item,index) in phoneitem.imgList" :key='index'><img v-lazy="item" lazy="loading" alt=""></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>           
            </swiper>
            <hr style='margin-top:5px'>
            <div class="p10 baojia">
                <h4>{{phoneitem.title}}</h4>
                <p>￥{{phoneitem.nowPrice}}</p>
            </div>
            <div class="parameter ">
                <div class="model">
                    <p>类型 ：</p>
                    <ul>
                        <li v-for="(item,index) in phoneitem.storageList" :key='index'>{{item.name}}</li>
                    </ul>
                </div>
                <div class="colorlist">
                    <p>颜色 ：</p>
                    <ul>
                        <li v-for="(item,index) in phoneitem.colorList" :key='index'>{{item.name}}</li>
                    </ul>
                </div>
                <div class="model">
                    <p>其他 ：</p>
                    <ul>
                        <li>dsad</li>
                        <li>dsad</li>
                        <li>dsad</li>
                        <li>dsad</li>
                        <li>dsad</li>
                    </ul>
                </div>
            </div>
        </div>  
        <bottom :goods='phoneitem' :goodid='id'></bottom>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import api from '../api/api.js'
    import bottom from './Bottom.vue'
    export default {
        data(){
            return{
                phoneitem:{
                    title:'暂无描述',
                    nowPrice:'暂无报价',
                    imgList:[1,2]
                },   
                paraList:[1,2,3],
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true, //点击完后可以继续滑动
                    autoplay:3000,
                    loop : true, //循环
                    autoplayDisableOnInteraction:false
                },
                id:''
            }
        },
        components:{
            swiper,
            swiperSlide,
            bottom
        },
        beforeRouteEnter(to, from, next){
            
            next(vm=>{
                var id=vm.$route.params.cid
                vm.id = id
                //进入路由先还原phoneitem的值
                vm.phoneitem={
                    title:'暂无描述',
                    nowPrice:'暂无报价',
                    imgList:[1,2],
                }
                vm.$http.get(api.getphonedetails(id)).then((res)=>{
                    vm.phoneitem = res.data.showapi_res_body.item;
                    
                }).catch((error)=>{
                    console.log(error)
                })
            })
        },
        // created(){
        //     var id = this.$route.params.id
        //     console.log(id);
        //     this.$http.get(api.getphonedetails(id)).then((res)=>{
        //         this.phoneitem = res.data.showapi_res_body.item;
        //     }).catch((error)=>{
        //         console.log(error)
        //     })
        // },
        methods:{
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>
<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .particulars{
        padding-bottom: 2rem;
        .content{
            img{
                width: 100%;
            }
            .p10{
                padding: 5px;
            }
            .baojia{
                h4{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                // font-size: 18px;
                font-size: .73rem;
                -webkit-box-orient: vertical;
                text-align:justify;
                background-color:#fff;
                }
                p{
                    font-size: .8rem;
                    color: #009688;
                    background-color:#fff;
                }
            }
        }
    }
    .topbar{
       height: 1.8rem;
       .default{
            line-height: 1.8rem;
            text-align: center;
            .demo-flat-button{
                padding:0 15px;
            }
        }    
    }
    .swiperlist{
        background-color: #f5f5f5;
    }
    .swiper-slide{
        img{
        width: 100%;
        // background-size: cover;
        }
    }
    .parameter{
        padding: 0 10px 10px 10px;
        >div{
            margin: 10px 0;
        }
        
        ul{
            list-style: none;
            margin-left: 5px;
            overflow: hidden;
            li{
                float: left;
                padding: 0 10px;
                margin: 5px;
                border: 1px solid #D0D0D0;
            }
        }
    }
</style>